<template>
	<view>
		<view style="background-color: #FFFFFF;">
			<cu-custom :isBack="true">
				<block slot="backText"></block>
				<block slot="content">{{corpCode}}-ASN单到货</block>
			</cu-custom>
		</view>
		<!-- <u-sticky class="u-sticky">
			<view class="padding-sm flex light " style="background-color: #eee;" @tap="show=true" >
				<view style="width: 100%"><u-search placeholder="发货车次/车牌号/状态等" v-model="keyword" bg-color="#fff"
						:show-action="false" :disabled="true" @tap="show=true" searchIconSize="26"
						:inputStyle="inputStyle"></u-search>
				</view>

			</view>
		</u-sticky> -->

		<view class="cu-bar bg-white search fixed"  :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round" @tap="show=true">
				<text class="cuIcon-search"></text>
				<!-- <input @confirm="sub" v-model="asnId" :focus="true" ></input> -->
				<input @tap="show=true" v-model="keyword" type="text" :disabled="true" placeholder="搜索" ></input>
			</view>

		</view>
		<u-popup :zIndex='99999' v-model="show" mode="right" length="90%">
			<view
				style="font-size: 18px;border-bottom: 1px solid #aaa;font-weight: bold;padding: 10px;display: flex;justify-content: space-between;">
				<text class=" padding-left-sm" style="color: #3E97B0;">筛选</text>
				<text @click="show=false">关闭</text>
			</view>
			<view class="cu-item shadow ">
				<view class="cu-form-group">
					<view class="title1">存货编码：</view>
					<view style="flex: 1;"> <input placeholder="请输入" v-model="query['basInv.viewCode']" type="text"
							maxlength="200"></input>
					</view>

				</view>
				<view class="cu-form-group">
					<view class="title1">存货名称：</view>
					<view style="flex: 1;"> <input placeholder="请输入" v-model="query.invName" type="text"
							maxlength="200"></input></view>
				</view>
				<view class="cu-form-group">
					<view class="title1">托盘编号：</view>
					<view style="flex: 1;"> <input placeholder="请输入" v-model="query.tuopanNos" type="text"
							maxlength="200"></input></view>
				</view>
			</view>

			<view class=" flex cu-bar tabbar bg-white foot cu-modal-footer">
				<button class="cu-btn  lines-red lg " @click="reset">重置</button>
				<button class="cu-btn  bg-confirm lg margin-left " @click="submit">查询</button>
			</view>
		</u-popup>
		<scroll-view scroll-y="true" @scrolltolower="loadMore" :scrolltolower-enabled="true" class="scroll-view-class"
			:refresher-triggered="triggered" style="margin-top: 20rpx;" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 70px)'}]">
			<view class="scroll-content" ref="scrollContent" style="
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        ">
				<view v-for="(item,index) in list"  class="cu-item shadow " style="position: relative;" :key="item.id">
					<view class="cu-form-group" style="display: flex;justify-content: space-between;">
						<view
							style=" display: inline-block;padding: 5px;background: #3E97B0;color: #fff;min-width: 40px;text-align: center;font-style: italic;font-weight: bold">
							{{ index + 1 }}
						</view>
						<view class="text-red text-bold">
							{{ item.basInv.viewCode|| ""  }}
						</view>
					</view>

					<view class="cu-form-group ">
						<view class="title ">存货名称：</view>
						<view style="flex: 1;"> {{ item.invName || ''  }}</view>
					</view>
					<view class="cu-form-group">
						<view class="title">总箱数：</view>
						<view style="flex: 1;"> {{ item.boxNum || ""  }}
						</view>
					</view>
					<view class="cu-form-group">
						<view class="title">混装箱数：</view>
						<view style="flex: 1;"> {{ item.pxNum|| ""  }} </view>

					</view>
					<view class="cu-form-group">
						<view class="title">总托数：</view>
						<view style="flex: 1;"> {{ item.tuopanNum || ''}} </view>
					</view>
					<view class="cu-form-group">
						<view class="title">托盘编号：</view>
						<view style="flex: 1;"> {{ item.tuopanNos  || ''}} </view>
					</view>
					<view class="cu-form-group">
						<view class="title">备注：</view>
						<view style="flex: 1;"> {{ item.remarks || ''}} </view>
					</view>
				</view>
				<view v-if="!list.length" style="text-align: center;margin-top: 90px;">
					暂无数据
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import uPopup from "@/uview-ui/components/u-popup/u-popup.vue";
	import uMask from "@/uview-ui/components/u-mask/u-mask.vue";
	import uLoadmore from "@/uview-ui/components/u-loadmore/u-loadmore.vue";
	import uLine from "@/uview-ui/components/u-line/u-line.vue";
	import uEmpty from "@/uview-ui/components/u-empty/u-empty.vue";
	import uPicker from "@/uview-ui/components/u-picker/u-picker.vue";
	// import uInput from "@/uview-ui/components/u-input/u-input.vue";
	export default {
		components: {
			uPopup,
			uMask,
			uLoadmore,
			uLine,
			uEmpty,
			uPicker
		},
		data() {
			return {
				CustomBar: this.CustomBar, //滚动定位用
				show: false,
				smshow: false,
				focus: true,
				barCode: "",
				remarks: '',
				czData: {},
				show2: false,
				type: 'text',
				startTime: false, //控制日期显示
				endTime: false, //控制日期显示
				show: false,
				inputStyle: {
					fontSize: '34rpx'
				},
				keyword: "",
				background: {
					backgroundColor: '#3E97B0',
				},
				list: [],
				itemContent: {},
				query: {
					pageNo: 1,
					pageSize: 20,
					// paramMap:'11'
					// orderBy: "a.create_date desc",
				},
				loadStatus: "loadmore",
				triggered: false,
				flag: false,
				scrollViewHeight: 0,
				headerHeight: 0,
			};
		},
		onShow() {
		},
		onLoad(e) {
			this.query.pageNo = 1;
			console.log(e,)
			this.query.asnId = e.asnId
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'auditlist', 'corpCode']),
		},
		mounted() {

		},
		methods: {
			confirm() {
				let _this = this;
				if (this.barCode) {
					this.$u.api.kst
						.moOrderListData({
							pageNo: 1,
							pageSize: 20,
							whType: _this.$store.state.kst.wareType,
							modid: _this.barCode,
						})
						.then((res) => {
							console.log(res, "res");
							if (res.result && res.data.length == 1) {
								uni.navigateTo({
									url: "/pages/wms/scll/details?id=" +
										res.data[0].id +
										"&wareType=" +
										uni.getStorageSync("param").id +
										"&ccode=" +
										res.data[0].basInv.cinvname,
								});
								_this.smshow = false;
							} else {
								_this.focus = false;
								// this.$u.toast("请扫描正确的任务单号");
								_this.$refs.jsError.showError("", "请扫描正确的任务单号", "warn");
							}
							this.barCode = "";
							setTimeout(() => {
								_this.focus = true;
							}, 500);
						});
				} else {
					// this.$u.toast("任务单号不能为空!");
					_this.$refs.jsError.showError("", "任务单号不能为空", "warn");
				}
			},
			search() {
				let _that = this;
				uni.scanCode({
					scanType: ["barCode", "qrCode"],
					// onlyFromCamera: true,
					success: function(res) {
						console.log("条码类型：" + res.scanType);
						console.log("条码内容：" + res.result);
						_that.barCode = res.result;
					},
				});
			},
			carNoconfirm(v) {
				this.query.carNo = v;
				this.$forceUpdate()
			},
			showKeyboard(ref) {
				this.$refs[ref].toShow(this.query.carNo)
			},
			handlePos(item) {
				const that = this
				uni.navigateTo({
					url: '/pages/mf/fh/invPosList?id=' + item.id,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						Filter(data) {

						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						// res.eventChannel.emit('initfilter', that.filter)
					}
				})
			},
			editDetail(model) {
				const that = this
				let cbarcode = model.cbarcode?model.cbarcode:''
				uni.navigateTo({
					url: '/pages/codeandwh/asntowh?cbarcode=' + cbarcode,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						Filter(data) {

						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						// res.eventChannel.emit('initfilter', that.filter)
					}
				})
			},
			viewDetail(model){
				uni.navigateTo({
					url: '/pages/codeandwh/asntowh?cbarcode=' + cbarcode,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						Filter(data) {
				
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						// res.eventChannel.emit('initfilter', that.filter)
					}
				})
			},
			addFH(item) {
				const that = this
				let id = item.id ? item.id : ''
				uni.navigateTo({
					url: '/pages/mf/fh/fhdj?id=' + id,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						Filter(data) {

						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						// res.eventChannel.emit('initfilter', that.filter)
					}
				})
			},
			//跳转详情页面上传图片
			toFj(model) {
				const that = this
				uni.navigateTo({
					url: '/pages/mf/fh/fhfj?model=' + JSON.stringify(model),
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						Filter(data) {

						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						// res.eventChannel.emit('initfilter', that.filter)
					}
				})
			},

			btnOver(model) {
				this.show2 = true
				this.czData = model
			},


			toAdd(model) {
				const that = this
				uni.navigateTo({
					url: '/pages/mf/fh/fhList?hid=' + model.id + '&carType=' + model.carType,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						Filter(data) {

						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						// res.eventChannel.emit('initfilter', that.filter)
					}
				})
			},


			// this.$forceUpdate();
			reset() {
				this.list = [];
				this.query = {
					pageNo: 1,
					pageSize: 20,
					asnId : this.query.asnId
				};
				this.loadData();
				this.show = false
			},
			submit() {
				this.list = [];
				this.query.pageNo = 1;
				this.loadData();
				this.show = false
			},
			startConfirm(e) {
				this.query.dsenddate_gte = e.year + '-' + e.month + '-' + e.day;
			},
			endConfirm(e) {
				this.query.dsenddate_lte = e.year + '-' + e.month + '-' + e.day;
			},
			loadMore() {
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.pageNo += 1;
					this.loadData("add");
				}, 100);
			},
			loadData(type) {
				uni.request({
					url: this.serverURL_a + '/order/orderAsnH/packageListData',
					data: {
						...this.query,
						__sid: this.userInfo.sessionid,
						// status_in: 0
					},
					
					success: function(data) {
						let res = data.data;
						if (res.list.length >= 0) {
							if (res.list.length < 20 || res.list.length == 0) {
								this.loadStatus = "nomore";
							}
							var data = res.list;
							if (type == "add") {
								for (var i = 0; i < data.length; i++) {
									this.list.push(data[i]);
								}
							} else {
								this.list = data;
							}
						}
					}.bind(this),
					fail: function() {
						this.$api.msg('服务已停止,请稍后再试');
						return;
					}.bind(this),
				});


			},
		},

	};
</script>
<style lang="scss" scoped>
	.cu-bar {
		min-height: 60px;
	}

	.cu-btn {
		font-size: 16px;
		height: 40px;
	}

	.foot {
		background: #fff;
	}

	.cu-item {
		flex-wrap: wrap;
		padding: 8px 15px !important;
	}

	.title {
		width: 220rpx;
	}
	.title1 {
		width: 240rpx;
	}

	.cu-modal-slot {
		margin: 42rpx 32rpx 20rpx 32rpx;
		height: 100vh;
		position: relative;
	}

	.cu-modal-header {
		font-size: 38rpx;
		color: #3d3d3d;
		line-height: 40rpx;
		text-align: left;
		font-weight: 500;
	}

	.button {
		font-size: 32rpx;
		color: #666666;
		line-height: 40rpx;
		padding: 12rpx 40rpx;
		margin-bottom: 20rpx;
		background: #e2e2e2;
		border-radius: 180rpx;
	}

	.button:hover {
		background: #3e97b0;
		color: #ffffff;
	}

	.cu-modal-search-title {
		margin: 32rpx 0rpx 20rpx 0rpx;
		text-align: left;
		font-size: 32rpx;
		color: #999999;
		line-height: 40rpx;
	}

	.cu-dialog {
		background: #ffffff;
	}

	.cu-modal-footer {
		padding: 32rpx 32rpx;
		width: 100%;

		.cu-btn {
			width: 50%;
		}
	}

	.bg-confirm {
		background: #3e97b0;
		color: #ffffff;
	}

	page {
		padding-top: 100upx;
	}

	.indexes {
		position: relative;
	}

	/* 底部栏 */
	.action-section {
		/* #ifdef H5 */
		/* #endif */
		position: fixed;
		left: 75%;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, .9);
		border-radius: 40upx;

		.checkbox {
			height: 52upx;
			position: relative;

			image {
				width: 52upx;
				height: 100%;
				position: relative;
				z-index: 5;
			}
		}

		.clear-btn {
			position: absolute;
			left: 26upx;
			top: 0;
			z-index: 4;
			width: 0;
			height: 52upx;
			line-height: 52upx;
			padding-left: 38upx;
			font-size: $font-base;
			color: #fff;
			background: $font-color-disabled;
			border-radius: 0 50px 50px 0;
			opacity: 0;
			transition: .2s;

			&.show {
				opacity: 1;
				width: 120upx;
			}
		}

		.total-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			text-align: right;
			padding-right: 40upx;

			.price {
				font-size: $font-lg;
				color: $font-color-dark;
			}

			.coupon {
				font-size: $font-sm;
				color: $font-color-light;

				text {
					color: $font-color-dark;
				}
			}
		}

		.confirm-btn {
			padding: 0 38upx;
			margin: 0;
			border-radius: 100px;
			height: 76upx;
			line-height: 76upx;
			font-size: $font-base + 2upx;
			background: $uni-color-primary;
		}
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
</style>